<template>
  <view class="page container">
    <view class="bgc-fff" style="margin-top: 32rpx">
      <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" labelWidth="200rpx" errorType="toast">
        <u-form-item label="门店名称：" prop="title" borderBottom>
          <u-input v-model="formData.title" border="none" inputAlign="right" placeholder="请输入门店名称"></u-input>
        </u-form-item>
        <u-form-item label="门店联系人：" prop="contact_name" borderBottom>
          <u-input v-model="formData.contact_name" border="none" inputAlign="right" placeholder="请输入联系人姓名"
            fontSize="28rpx"></u-input>
        </u-form-item>
        <u-form-item label="联系方式：" prop="contact_phone" borderBottom>
          <u-input v-model="formData.contact_phone" border="none" inputAlign="right" placeholder="请输入手机号"
            fontSize="28rpx"></u-input>
        </u-form-item>
        <u-form-item label="所属社区：" prop="region_name" borderBottom @click="openCommunityPicker">
          <u-input readonly v-model="formData.region_name" border="none" inputAlign="right" placeholder="请选择所属社区"
            fontSize="28rpx">
            <template slot="suffix">
              <u-icon name="arrow-right"></u-icon>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item label="门店位置：" prop="map_address" borderBottom @click="chooseLocation">
          <u-input readonly v-model="formData.map_address" border="none" inputAlign="right" placeholder="请选择门店位置"
            fontSize="28rpx">
            <template slot="suffix">
              <image class="w-25 h-32" src="/static/svg/local.svg"></image>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item prop="map_street" borderBottom>
          <view class="pl-28">
            <u-input v-model="formData.map_street" border="none" placeholder="请输入详细地址如门牌号等" fontSize="28rpx"></u-input>
          </view>
        </u-form-item>
        <u-form-item label="营业执照：" prop="license" labelPosition="top">
          <view class="pl-28 mt-16 flex-row-between">
            <image class="w-284 h-204 br-12" :src="formData.license || '/pages2/static/upload-img.png'"
              @click="uploadImg('license')"></image>
            <!-- 详情时展示，审核状态 -->
            <view style="margin-top: -55rpx" v-if="userInfo.yan_shop.id">
              <image class="w-140 h-140" :src="getStatusImg"></image>
            </view>
          </view>
        </u-form-item>
        <!-- <u-form-item label="法人身份证（正反面）：" prop="front_image" labelPosition="top" labelWidth="400rpx">
          <view class="pl-28 mt-16 flex-column-center">
            <block>
              <image class="w-284 h-204 br-12" :src="formData.front_image || '/pages2/static/upload-card1.png'"
                @click="uploadImg('front_image')"></image>
            </block>
            <view class="w-28"></view>
            <block>
              <image class="w-284 h-204 br-12" :src="formData.back_image || '/pages2/static/upload-card2.png'"
                @click="uploadImg('back_image')"></image>
            </block>
          </view>
        </u-form-item> -->
        <u-form-item label="门头照片：(至多一张)" prop="logo" labelPosition="top" labelWidth="400rpx">
          <view class="pl-28 mt-16">
            <image class="w-284 h-204 br-12" :src="formData.logo || '/pages2/static/upload-img.png'"
              @click="uploadImg('logo')">
            </image>
          </view>
        </u-form-item>
        <u-form-item label="门店形象展示：(5张以内)" labelPosition="top" labelWidth="400rpx" borderBottom>
          <view class="pl-28 mt-16">
            <u-upload :file-list="formData.images" :maxCount="5" multiple width="284rpx" height="204rpx"
              @afterRead="(e) => afterRead(1, e)" @delete="(e) => deletePic(1, e)" :previewFullImage="true">
              <image class="w-284 h-204 br-12" src="/pages2/static/upload-img.png"></image>
            </u-upload>
          </view>
        </u-form-item>
        <u-form-item label="店铺简介：" prop="content" labelPosition="top">
          <view class="pl-28 mt-16">
            <view class="bgc-f7f8fa">
              <u-textarea v-model="formData.content" border="none" height="268rpx" placeholder="请输入店铺简介"></u-textarea>
            </view>
          </view>
        </u-form-item>
      </u--form>
    </view>
    <view class="bottom-box pl-32 pr-32">
      <view class="flex-column flex-column-center" @click="resetForm">
        <u-icon name="reload" size="40rpx"></u-icon>
        <text class="fs-24">重置</text>
      </view>
      <u-button :customStyle="{
        backgroundColor: '#C5261D',
        color: '#fff',
        borderRadius: '10rpx',
        width: '596rpx',
        height: '88rpx',
        fontSize: '32rpx',
        border: 'none',
      }" @click="submitForm">提交申请</u-button>
    </view>
    <CommunityPicker ref="communityPickerRef" @onSubmit="onCommunitySubmit" />
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import {
  applyEnterYanShopApi,
  applyEnterYanShopDetailApi,
} from "@/services/my";
import CommunityPicker from "../components/CommunityPicker.vue";
export default {
  components: {
    CommunityPicker,
  },
  data() {
    return {
      activeTab: "1",
      formData: {
        title: "",
        contact_name: "",
        contact_phone: "",
        map_address: "",
        lat: "",
        lng: "",
        city: "",
        district: "",
        town: "",
        map_street: "",
        license: "",
        //front_image: "",
        //back_image: "",
        logo: "",
        images: [],
        content: "",
      },
      rules: {
        title: {
          type: "string",
          required: true,
          message: "请填写门店名称",
        },
        contact_name: {
          type: "string",
          required: true,
          message: "请输入联系人姓名",
        },
        contact_phone: {
          type: "string",
          required: true,
          pattern: /^1[3-9]\d{9}$/,
          message: "请输入正确的手机号",
        },
        map_address: {
          type: "string",
          required: true,
          message: "请选择门店位置",
        },
        map_street: {
          type: "string",
          required: true,
          message: "请输入详细地址",
        },
        region_name: {
          type: "string",
          required: true,
          message: "请选择所属社区",
        },
        license: {
          type: "string",
          required: true,
          message: "请上传营业执照",
        },
        // front_image: {
        //   type: "string",
        //   required: true,
        //   message: "请上传身份证正面照片",
        // },
        // back_image: {
        //   type: "string",
        //   required: true,
        //   message: "请上传身份证反面照片",
        // },
        logo: {
          type: "string",
          required: true,
          message: "请上传门头照片",
        },
        content: {
          type: "string",
          required: true,
          message: "请输入店铺简介",
        },
      },
    };
  },
  onLoad() {
    this.getUserInfo().then(() => {
      const { yan_shop } = this.userInfo;
      if (yan_shop.id) {
        this.getApplyEnterYanShopDetail();
      }
    });
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    getStatusImg() {
      console.log("this.userInfo?.yan_shop", this.userInfo?.yan_shop);

      switch (+this.userInfo?.yan_shop?.status) {
        case 0:
          return "/pages2/static/shenhezhong.png";
        case 1:
          return "/pages2/static/shenhetongguo.png";
        case 2:
          return "/pages2/static/shenhejujue.png";
        default:
          return "";
      }
    },
  },
  methods: {
    ...mapActions({
      getUserInfo: "user/getUserInfo",
    }),
    resetForm() {
      this.formData = this.$options.data().formData;
    },
    async submitForm() {
      this.$refs.uForm.validate().then(async () => {
        let copyData = uni.$u.deepClone(this.formData);
        copyData.images = copyData.images.map((item) => item.urls).join(",");
        await applyEnterYanShopApi(copyData);
        // this.$utils.redirectTo("/pages2/my/apply_enter_member_detail?toast=1");
		uni.redirectTo({
			url:'/pages2/my/applyResult'
		})
      });
    },
    getApplyEnterYanShopDetail() {
      applyEnterYanShopDetailApi().then((res) => {
        if (res && res.data) {
          const data = res.data?.shop_info;
          // 处理图片数组
          let images = [];
          if (data.images) {
            const imageUrls = data.images.split(",");
            images = imageUrls.map((url) => ({
              fullurl: url,
              urls: url,
            }));
          }

          this.formData = {
            ...data,
            images,
          };
        }
      });
    },
    onCommunitySubmit(e, names) {
      const [city, district, town, village] = e;
      const [cityName, districtName, townName] = names;
      this.formData.city = city;
      this.formData.district = district;
      this.formData.town = town;
      this.formData.village = village;
      this.formData.region_name = `${cityName} ${districtName} ${townName}`;
    },
    openCommunityPicker() {
      this.$refs.communityPickerRef.open();
    },
    chooseLocation() {
      uni.chooseLocation({
        success: (res) => {
          this.formData.map_address = res.address;
          this.formData.lat = res.latitude;
          this.formData.lng = res.longitude;
        },
      });
    },
    uploadImg(type) {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const file = res.tempFilePaths[0];
          this.$utils.uploadImg(file).then((ress) => {
            const { fullurl } = ress;
            this.formData[type] = fullurl;
          });
        },
      });
    },
    afterRead(type, e) {
      for (var i = 0; i < e.file.length; i++) {
        this.$utils.uploadImg(e.file[i].url).then((res) => {
          if (type == 1) {
            this.formData.images.push({ fullurl: res.fullurl, urls: res.url });
          }
        });
      }
    },
    deletePic(type, e) {
      if (type == 1) {
        this.formData.images.splice(e.index, 1);
      }
    },
  },

  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: 188rpx;
  background-color: #f7f8fa;

  /deep/.u-form-item__body {
    padding-top: 28rpx;
    padding-bottom: 28rpx;
  }

  /deep/.u-form-item__body__left {
    padding-left: 28rpx;
  }

  /deep/.u-form-item__body__left__content__label {
    font-size: 28rpx !important;
  }

  /deep/.u-form-item__body__right {
    padding-right: 28rpx;
  }

  /deep/.u-textarea {
    background-color: transparent;
  }

  .bottom-box {
    padding-top: 16rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 168rpx;
    z-index: 999;
    background-color: #fff;
    box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
  }

  .tabs {
    width: 686rpx;
    height: 68rpx;
    border-radius: 12rpx;
    background: #f7f8fa;
    display: flex;
    justify-content: space-between;

    .tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: 500;

      &-active {
        border-radius: 12rpx;
        background: $theme-color;
        color: #fff;
      }
    }
  }
}
</style>